/**
 * 管理界面头部操作按钮
 **/
import React, { memo, useState } from 'react';
import { Button } from 'antd';
import { TableOutlined } from '@ant-design/icons';
import styles from '@/components/SchemaComponent/SchemaManage/styles.less';
import { ManageContext } from '@/components/SchemaComponent/SchemaManage/store/index';
import _ from 'lodash';
// import { IActionButton } from './type';
import { ChangeColumns } from './ChangeColumns';
import { SchemaManageAPI } from '../../type';

interface IpropsType {
  actionList: SchemaManageAPI.IActionBtnList[];
  screenColumns: (columns: any) => any;
}
export const ActionButtons: React.FC<IpropsType> = memo(({ actionList, screenColumns }) => {
  const [visible, setVisible] = useState(false);

  const { Table } = React.useContext(ManageContext);
  const onOpen = () => {
    //打开弹窗
    setVisible(true);
  };

  const onClose = () => {
    //关闭弹窗
    setVisible(false);
  };

  const onOk = (columns: any[]) => {
    //改变列
    if (columns) {
      screenColumns(columns);
    }
  };

  return (
    <>
      {!Table?.noShowColumns || (actionList && actionList?.length > 0) ? (
        <>
          <div className={styles['action-btn-layout']}>
            <div className={styles['action-btn-opt']}>
              {actionList &&
                actionList?.length > 0 &&
                actionList?.map((item, index) => {
                  if (item?.visible) {
                    return (
                      <div className={styles['action-btn-child']} key={index}>
                        {item?.component ? (
                          item?.component
                        ) : (
                          <Button
                            type={item?.type}
                            disabled={item?.disabled}
                            size={item?.size}
                            loading={item?.loading}
                            icon={item?.icon}
                            onClick={item?.onClick}
                            onMouseOut={(event: any) => {
                              event?.target?.nodeName == 'BUTTON' ? event?.target?.blur() : event.target.parentNode.blur();
                            }}
                          >
                            {item?.title}
                          </Button>
                        )}
                      </div>
                    );
                  } else if (item?.isRender) {
                    return (
                      <div className={styles['action-btn-child']} key={index} style={{ display: 'none' }}>
                        {item?.component ? (
                          item?.component
                        ) : (
                          <Button
                            type={item?.type}
                            disabled={item?.disabled}
                            size={item?.size}
                            loading={item?.loading}
                            icon={item?.icon}
                            onClick={item?.onClick}
                            onMouseOut={(event: any) => {
                              event?.target?.nodeName == 'BUTTON' ? event?.target?.blur() : event.target.parentNode.blur();
                            }}
                          >
                            {item?.title}
                          </Button>
                        )}
                      </div>
                    );
                  } else {
                    return '';
                  }
                })}
            </div>
            {!Table?.noShowColumns && (
              <div className={styles['action-btn-table']}>
                <Button type={'default'} icon={<TableOutlined />} onClick={onOpen}>
                  显示列
                </Button>
              </div>
            )}
            {visible && <ChangeColumns onClose={onClose} columnsList={Table?.columns} onOk={onOk} />}
          </div>
        </>
      ) : (
        <></>
      )}
    </>
  );
});
